<!-- 工艺建模标签，进入工艺建模页面。实现工艺建模数据列表显示 CRUD -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <h1>工艺建模</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" :offset="4">
        工艺名称:
        <el-input style="width: 200px" v-model="technology.name"></el-input>
        <el-button type="success" size="medium" @click="queryList()"
          >查询</el-button
        >
        <el-button type="info " size="medium" @click="clear()">重置</el-button>
      </el-col>

      <el-col :span="12" :offset="0">
        <el-button type="primary" size="medium" @click="sava('添加')"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24" :offset="0">
        <el-table :data="processModeling" style="width: 100%">
          <el-table-column prop="id" label="编号" width="120" />
          <el-table-column prop="name" label="工艺名称" width="120" />
          <el-table-column prop="product" label="产品" width="180" />
          <el-table-column prop="type" label="型号" width="155" />
          <el-table-column prop="specification" label="规格" width="150" />
          <el-table-column prop="unit" label="单位" width="150" />
          <el-table-column prop="consumption" label="单位耗电量" width="160" />
          <el-table-column prop="remark" label="备注" width="160" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="getUpdateById(scope.$index, scope.row, '编辑')"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="要删"
                cancel-button-text="不删"
                icon="el-icon-info"
                icon-color="red"
                title="要删除这条数据吗?"
                @confirm="deleteById(scope.$index, scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 弹框 -->
    <el-dialog :title="title" width="40%" :visible.sync="savaOrUpdateDialog">
      <div>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">工艺名称: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.name" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">产品: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.product" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">型号: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.type" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">规格: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input
              style="width: 200px"
              v-model="saveOrUpdateInfo.specification"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">单位: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.unit" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">单位耗电量: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input
              style="width: 200px"
              v-model="saveOrUpdateInfo.consumption"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">备注: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input
              style="width: 200px"
              v-model="saveOrUpdateInfo.remark"
            />
          </el-col>
        </el-row>
      </div>
      <span slot="footer">
        <el-button @click="savaOrUpdateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="saveOrUpdate()">OK</el-button>
      </span>
    </el-dialog>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="queryList"
        @current-change="queryList"
        :current-page.sync="pageNum"
        :page-sizes="[3, 5, 7, 9]"
        :page-size.sync="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryByPage,
  update,
  remove,
  insert,
} from "@/api/manufacturing_execution_mes/Process_modeling.js";

export default {
  data() {
    return {
      savaOrUpdateDialog: false, // 弹窗控制
      processModeling: [{}], // 主页面数据
      technology: {
        name: "",
      },
      //   分页
      pageNum: 1,
      pageSize: 3,
      total: 0,
      saveOrUpdateInfo: {
        // 新增 or 修改的参数
        id: 0,
      },
      title: "", // 弹窗标题控制
    };
  },
  methods: {
    // 查询
    queryList() {
      queryByPage(this.pageNum, this.pageSize, this.technology).then((resp) => {
        console.log(resp);
        this.processModeling = resp.data.list;
        // this.pageNum = resp.data.pageNum;
        // this.pageSize = resp.data.pageSize;
        this.total = resp.data.total;
        this.$message({
          message: "数据已刷新",
          type: "success",
        });
      });
    },
    // 添加or修改
    saveOrUpdate() {
      if (this.saveOrUpdateInfo.id == 0) {
        // 添加
        insert(this.saveOrUpdateInfo).then((resp) => {
          if (resp.data == 1) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.savaOrUpdateDialog = false;
            this.queryList();
          }
        });
      }
      update(this.saveOrUpdateInfo).then((resp) => {
        if (resp.data == 1) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.savaOrUpdateDialog = false;
          this.queryList();
        }
      });
      // 修改
    },
    // 修改
    getUpdateById(index, row, title) {
      this.title = title;
      this.saveOrUpdateInfo = { ...row };
      this.savaOrUpdateDialog = true;
    },
    // 删除
    deleteById(index, row) {
      remove(row.id).then((resp) => {
        if (resp.data == 1) {
          this.$message({
            message: "删除成功",
            type: "warning",
          });
          this.pageNum = 1
          this.queryList();
        }
      });
    },
    sava(title) {
      if (this.savaOrUpdateDialog == false) {
        this.saveOrUpdateInfo = { id: 0 };
        this.title = title;
        this.savaOrUpdateDialog = true;
      }
    },
    clear() {
      this.technology={}
      this.queryProcessModelingVo = { pageNum: 1, pageSize: 3 };
      this.queryList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.queryList();
  },
};
</script>

<style></style>